{% extends "base.html" %}

{% block meta %}
    <meta name="menu-tag" content="21"/>
{% end block %}

{% block main %}
<div class="container" id="divCourse">
    <ol class="breadcrumb">
        <li><a href="/courses?status=active">当前课程</a></li>
        <li class="active" data-bind="text:courseName"></li>
    </ol>
    <div class="page-header">
        <h4>
            <strong data-bind="text:courseName"></strong>
        </h4>
    </div>
    <div data-bind="foreach:chapters">
        <div class="panel-group" id="accordion">
            <div class="panel panel-primary">
                <div class="panel-heading" style="position:relative">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" data-bind="attr:{href:'#panel' + chapterid}">
                            <b data-bind="text:chaptername"></b>
                        </a>
                    </h4>
                </div>
                <div class="panel-collapse collapse in" data-bind="attr:{id:'panel' + chapterid}">
                    <div class="panel-body" data-bind="foreach:labs">
                        <div class="alert alert-success" 
                            data-bind="css:{'alert-danger':labtype==2 && enabled==1,'alert-success':labtype==1 && enabled==1, 'alert-info':enabled==0}">
                            <b data-bind="text:labname"></b>
                            <span class="pull-right" data-bind="visible: enabled==1">
                                <a type="button" class="btn btn-primary btn-xs fa fa-play-circle" title="进入实验"
                                    data-bind="attr:{href:'lab_home?code=' + labcode}" target="newtab"></a>
                                <a type="button" class="btn btn-danger btn-xs fa fa-recycle" title="重新加载实验包"
                                    data-bind="click:reloadLab"></a>
                            </span>
                            <span class="pull-right" data-bind="visible: enabled==0">
                                当前实验未开放
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</div>

{% end block %}


{% block script %}
<script type="text/javascript">
    var courseID = window.location.href.substr(window.location.href.indexOf('courseid=') + 'courseid='.length);

    function Chapter(chapterid, chaptername, code){
        var self = this;
        self.chapterid = chapterid;
        self.chaptername = chaptername;
        self.code = code;
        self.labs = ko.observableArray();
    }

    function Lab(labid, chapterid, labname, code, labtype, enabled, chapter){
        var self = this;
        self.labid = labid;
        self.chapterid = chapterid;
        self.labname = labname;
        self.labcode = code;
        self.labtype = labtype ? labtype.toString() : "1";
        self.enabled = enabled ? enabled.toString() : "0";
        self.chapter = chapter;

        self.reloadLab = function(){
            bootbox.confirm('重新加载实验包将会覆盖原有实验包，是否继续？', function(choice){
                if(choice){
                    requestData = {
                        operation : 'load_lab_files',
                        path : self.labcode
                    };
                    $.ajax({
                        url: '/labstorage',
                        type: "POST",
                        data: JSON.stringify(requestData),
                        dataType: 'JSON',
                        success:function(jsonResult){
                            if(jsonResult.success){
                                bootbox.alert('加载成功');
                            } else{
                                bootbox.alert(jsonResult.message);
                            }
                        }
                    });
                }
            });
        };     
    }

    function ModelView(){
        var self = this;
        self.courseName = "";
        self.chapters = ko.observableArray();   
    }

    function load_data(courseID){
        $.getJSON("/lab?operation=get_course_labs&operand=" + courseID, function(jsonResult){
            var chapters = [];

            for(var i=0;i<jsonResult.data.chapters.length;i++){
                var item1 = jsonResult.data.chapters[i];
                var chapter = new Chapter(item1.chapterid, item1.chaptername, item1.code);
                chapters.push(chapter);

                for(var j=0;j<jsonResult.data.labs.length;j++){
                    var item2 = jsonResult.data.labs[j];
                    if(item2.chapterid == item1.chapterid){
                        var lab = new Lab(item2.labid, item2.chapterid, item2.labname, 
                            item2.code, item2.labtype, item2.enabled, chapter);
                        chapter.labs.push(lab);
                    }
                }
            }           

            var modelView = new ModelView();
            modelView.courseName = jsonResult.data.coursename;
            modelView.chapters(chapters);
            ko.applyBindings(modelView, document.getElementById('divCourse'));
        });
    }

    $(document).ready(function(){
        load_data(courseID);
    });
</script>
{% end block %}
